<template>
	<div>
		<el-dialog
			title="用户管理"
			:visible.sync="increased"
			:close-on-click-modal="false"
			:before-close="newlyCancel"
			append-to-body
			:close-on-press-escape="false"
		>
			<el-form
				ref="newlyform"
				:model="newlyform"
				label-width="80px"
				:rules="rules"
			>
				<el-form-item label="医生ID" prop="doctorId">
					<el-select
						v-model="newlyform.doctorId"
						placeholder="请选择"
						clearable
					>
						<el-option
							v-for="item in doctorList"
							:key="item.id"
							:label="item.doctorName"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="用户名称" prop="userRealName">
					<el-input
						v-model="newlyform.userRealName"
						:readonly="doctorNameFlag"
					></el-input>
				</el-form-item>
				<el-form-item label="账号" prop="userAccount">
					<el-input v-model="newlyform.userAccount"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="userPassword">
					<el-input
						v-model="newlyform.userPassword"
						show-password
						type="passworld"
						auto-complete="new-password"
					></el-input>
				</el-form-item>
				<el-form-item label="性别">
					<el-radio-group v-model="newlyform.userGender">
						<el-radio v-model="radio" label="0">男</el-radio>
						<el-radio v-model="radio" label="1">女</el-radio>
					</el-radio-group>
				</el-form-item>
				<el-form-item label="手机号" prop="userTelephone">
					<el-input v-model="newlyform.userTelephone"></el-input>
				</el-form-item>
				<el-form-item label="所属机构">
					<el-cascader
						ref="cascader"
						v-model="dimensionArr"
						filterable
						:options="options"
						:props="{ value: 'id', label: 'orgName', checkStrictly: true }"
						clearable
						@change="institution"
					></el-cascader>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="small" @click="newly('newlyform')"
						>保存</el-button
					>
					<el-button size="small" @click="newlyCancel('newlyform')"
						>取消</el-button
					>
				</el-form-item>
			</el-form>
		</el-dialog>
	</div>
</template>

<script>
import { userInsert, userManagement, userAccountCheck } from '@/http/api.js'
import { getUserOrgList } from '@/http/org'
import { getUserDoctorList } from '@/http/doctor'
export default {
	props: {
		increased: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		var spCodeValidator = this.spCodeFun
		return {
			dimensionArr: [],
			options: [],
			doctorList: [],

			doctorNameFlag: false,
			newlyform: {
				doctorId: '',
				userRealName: '',
				userAccount: '',
				userPassword: '',
				userTelephone: '',
				userGender: '0',
				orgUuid: '0',
				whetherEnable: '0',
				treeDataList: [1],
				orgId: '',
			},
			checkedName: {
				name: '测试',
			},
			radio: '0',
			rules: {
				userRealName: [
					{ required: true, message: '不能为空', trigger: 'blur' },
				],
				userAccount: [
					{ required: true, message: '账号不能为空', trigger: 'blur' },
					{ validator: spCodeValidator, trigger: 'blur' },
					{
						min: 1,
						max: 20,
						message: '长度在 1 到 20 个字符',
						trigger: 'blur',
					},
				],
				userPassword: [
					{ required: true, message: '密码不能为空', trigger: 'blur' },
					{ min: 6, message: '不得少于6位', trigger: 'blur' },
				],
				userTelephone: [
					{ required: true, message: '手机号不能为空', trigger: 'blur' },
					{
						pattern:
							/^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/,
						message: '目前只支持中国大陆的手机号码',
					},
				],
			},

			form: {
				id: '',
			},
			treeData: [],
			userTreeData: [],
			defaultProps: {
				children: 'children',
				label: 'orgName',
			},
			userId: '',
		}
	},
	watch: {
		increased(isVisible) {
			if (isVisible) {
				this.getUserDoctorList()
			}
		},
		'newlyform.doctorId': function (val) {
			if (val && val != '') {
				this.doctorNameFlag = true
				let doctor = this.doctorList.find(info => info.id == val)
				this.newlyform.userRealName = doctor.doctorName
			} else {
				this.doctorNameFlag = false
				this.newlyform.userRealName = ''
			}
		},
	},
	created() {
		// this.getTreeData()
		getUserOrgList({}).then(({ data }) => {
			this.options = data.data
		})
	},
	methods: {
		getUserDoctorList() {
			getUserDoctorList({}).then(({ data }) => {
				if (data?.head?.code == 200) {
					this.doctorList = data.data
				}
			})
		},
		getData(pageConfig, pageSize, userAccount) {
			userManagement({
				pageNum: pageConfig,
				pageSize: pageSize,
				userAccount,
			}).then(data => {
				console.log('组件', data)
			})
		},
		// -----------------------------------------------------------------------------------
		handleItemChange() {
			let treeDataS = this.$refs.cascaderAddr.getCheckedNodes()
			console.log('-------', treeDataS)
		},

		setDisable(count, data, maxNum) {
			if (count > maxNum) {
				data.forEach(i => {
					i.disabled = true
				})
			} else {
				data.forEach(i => {
					i.count = count
					if (i.children && i.children.length) {
						i.count++
						this.setDisable(i.count, i.children, maxNum)
					}
				})
			}
		},

		// 新增账号校验
		spCodeFun(rule, value, callback) {
			userAccountCheck({ userAccount: value })
				.then(({ data }) => {
					if (data.head.code == 200) {
						callback()
					}
				})
				.catch(({ data }) => {
					if (data.head.code == 400) {
						callback(new Error('账号不能重复'))
						return
					} else {
						callback()
					}
				})
		},
		// 保存
		newly(formName) {
			this.$refs[formName].validate(valid => {
				if (valid) {
					let newlyform = this.newlyform
					let userAccount = this.newlyform.userAccount
					this.getData(1, 10, userAccount)
					userInsert(newlyform).then(data => {
						if (data.data.head.code == 200) {
							this.$message({
								message: '保存成功',
								type: 'success',
							})
							let dialogValue = {
								verdict: false,
								typeValue: 1,
							}
							this.$emit('newlyClick', dialogValue)
							this.newlyform = {
								doctorId: '',
								userRealName: '',
								userAccount: '',
								userPassword: '',
								userTelephone: '',
								userGender: '0',
								orgUuid: '0',
								whetherEnable: '0',
								orgId: '',
							}
							this.$refs.cascader.$refs.panel.clearCheckedNodes()
						}
					})
				} else {
					return false
				}
			})
		},
		newlyCancel() {
			this.newlyform = {
				doctorId: '',
				userRealName: '',
				userAccount: '',
				userPassword: '',
				userTelephone: '',
				userGender: '0',
				orgUuid: '0',
				whetherEnable: '0',
				orgId: '',
			}
			let dialogValue = {
				verdict: false,
				typeValue: 0,
			}
			this.$emit('newlyClick', dialogValue)
			this.$nextTick(() => {
				this.$refs['newlyform'].clearValidate()
				this.$refs.cascader.$refs.panel.clearCheckedNodes()
			})
		},
		institution(e) {
			console.log(e)
			this.newlyform.orgId = e.toString()
			console.log(this.newlyform.orgId)
		},
	},
}
</script>

<style lang="scss" scoped>
.el-cascader--medium {
	width: 100%;
}
</style>
